<!-- 个人中心 -->
<template>
	<view class="user-wrap">
		<!-- 个人信息 -->
		<sh-userinfo></sh-userinfo>
		<!-- 自提点 -->
		<view class="store-wrap" v-if="storeInfo.id">
			<view class="x-c store-box">
				<view class="x-bc store-card">
					<view class="store-left">
						<view class="store-head x-f mb20" @tap="$Router.push({ path: '/pages/app/store/location' })">
							<view class="store-title mr30">当前自提点</view>
							<view class="store-switch x-f">
								<text class="iconfont icon-huabanfuben switch-icon mr10"></text>
								切换
							</view>
						</view>
						<view class="store-content">{{ storeInfo.name }}</view>
					</view>
					<view class="store-location y-f" @tap="openLocation">
						<image class="store-location-img mb20" :src="$IMG_URL + '/user/qz_user_location.png'" mode=""></image>
						<view class="store-location-text">去导航</view>
					</view>
				</view>
			</view>
			<view class="x-bc">
				<view class="">
					<view class="store-address mx30 py20">地址：{{ storeInfo.address }}</view>
					<view class="store-phone mx30 pb20">电话：{{ storeInfo.phone }}</view>
				</view>
				<button class="cu-btn call-btn" @tap="$tools.callPhone(storeInfo.phone)">
					<text class="cuIcon-dianhua"></text>
					联系团长
				</button>
			</view>
		</view>
		<!-- 宫格列表 -->
		<view class="grid-wrap ma20" :style="!storeInfo.id ? 'margin-top:40rpx' : ''">
			<view class="tool-item y-f" v-for="(menu, index) in menuList" :key="index" @tap="$tools.routerTo(menu.path)">
				<image class="tool-img" :src="menu.img" mode="aspectFill"></image>
				<text class="item-title">{{ menu.name }}</text>
			</view>
		</view>
		<!-- 版本号 -->
		<view class="foot_box">
			<view class="copyright y-f" v-if="sysInfo">
				<view class="code1">{{ sysInfo.copyright[0] }}</view>
				<view class="code2">{{ sysInfo.copyright[1] }} {{ sysInfo.version }}</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<t-login-modal></t-login-modal>
	</view>
</template>

<script>
import shUserinfo from './components/sh-userinfo.vue';

import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shUserinfo
	},
	data() {
		return {
			platform: uni.getStorageSync('platform'), //当前平台。
			menuList: [
				//宫格列表
				{
					path: '/pages/user/log',
					img: this.$IMG_URL + '/user/user_log.png',
					name: '浏览足迹'
				},
				{
					path: '/pages/user/favorite',
					img: this.$IMG_URL + '/user/list1.png',
					name: '我的收藏'
				},
				{
					path: '/pages/public/poster/index?posterType=user',
					img: this.$IMG_URL + '/user/list11.png',
					name: '邀请好友'
				},
				{
					path: '/pages/public/faq',
					img: this.$IMG_URL + '/user/qz_menu2.png',
					name: '常见问题'
				},
				{
					path: '/pages/app/store/apply',
					img: this.$IMG_URL + '/user/qz_menu1.png',
					name: '团长申请'
				},
				{
					path: '/pages/user/set',
					img: this.$IMG_URL + '/user/list8.png',
					name: '系统设置'
				}
			]
		};
	},
	computed: {
		...mapState({
			initData: state => state.init.initData, //初始化数据
			userInfo: state => state.user.userInfo,
			storeInfo: ({ user }) => user.storeInfo
		}),
		sysInfo() {
			if (this.initData) {
				return this.initData.info;
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onLoad() {},
	onShow() {
		this.$store.commit('CART_NUM');
		this.init();
	},
	methods: {
		...mapActions(['getUserInfo']),
		// 初始化
		init() {
			return Promise.all([this.getUserInfo()])
				.then(() => {
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		},
		// 去导航
		openLocation() {
			uni.openLocation({
				latitude: Number(this.storeInfo.latitude),
				longitude: Number(this.storeInfo.longitude),
				name: this.storeInfo.name,
				address: this.storeInfo.address,
				success: function() {
					console.log('success');
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
.user-wrap {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
// 微信登录蒙层
.login-box {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: none;
}

// 版本信息
.foot_box {
	padding-top: 200rpx;
	padding-bottom: calc(var(--window-bottom) + 30px);
	margin-bottom: 50rpx;
}

.copyright {
	color: #999;

	.code1 {
		font-size: 24rpx;
	}

	.code2 {
		font-size: 20rpx;
		margin-top: 10rpx;
	}
}

// 自提点
.store-wrap {
	background-color: #fff;
	border-radius: 10rpx;
	margin: 40rpx 20rpx 20rpx;
	.store-box {
		background: url($IMG_URL+'/user/qz_user_location_bg.png') no-repeat;
		width: 710rpx;
		min-height: 210rpx;
		background-size: 100% 100%;
		.store-card {
			background: rgba(#fff, 0.9);
			box-shadow: 0 0 5rpx 0 rgba(185, 186, 189, 0.46);
			border-radius: 10rpx;
			width: 660rpx;
			height: 150rpx;
		}
		.store-left {
			width: 470rpx;
			height: 110rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			border-right: 2rpx solid #e5e5e5;
			.store-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}
			.store-switch {
				font-size: 22rpx;
				font-weight: 500;
				color: #b1b3c7;
				.switch-icon {
					transform: rotate(90deg);
				}
			}
			.store-content {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
		}
		.store-location {
			flex: 1;
			.store-location-img {
				width: 33rpx;
				height: 33rpx;
			}
			.store-location-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.store-address,
	.store-phone {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
	.call-btn {
		width: 140rpx;
		height: 50rpx;
		background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
		border-radius: 25rpx;
		font-size: 20rpx;
		color: #fff;
		padding: 0;
		margin-right: 20rpx;
		.cuIcon-dianhua {
			font-size: 30rpx;
			margin-right: 4rpx;
		}
	}
}

// 宫格
.grid-wrap {
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 40rpx;

	.tool-item {
		width: (710rpx/4);
		padding-top: 40rpx;

		.tool-img {
			width: 44rpx;
			height: 44rpx;
			// background: #ccc;
		}

		.item-title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 24rpx;
			padding-top: 30rpx;
		}
	}
}
</style>
